<template>
    <div class="wrap-container sn-container">
        <div class="sn-content">
            <div class="sn-title">大类资产配置趋势(亿元)</div>
            <div class="sn-body">
                <div class="wrap-container">
                    <div class="chartsdom" id="bigClassConfigurationTrend"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "bigClassConfigurationTrend",
        data(){
            return{
                option:{
                    color:['#4472C5','#ED7C30','#07d8ff','#d6d638','#00c86c','#8b5c85'],
                    title: {
                        text: '',
                        subtext: '',
                        top: 10,
                        left: 10
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: function (data) {
                            return data.name+"<br/>"+"债券:"+data.value[0]+"<br/>"+"基金:"+data.value[1]+"<br/>"+"股票:"+data.value[2]+"<br/>"+"货币市场:"+data.value[3]
                                +"<br/>"+"非标:"+data.value[4]+"<br/>"+"合计:"+(data.value[0]+data.value[1]+data.value[2]+data.value[3]+data.value[4]).toString().substring(0,6)
                        }
                    },
                    legend: {
                        type: 'scroll',
                        bottom: 10,
                        textStyle:{
                            color: '#ffffff'//字体颜色
                        },
                        data:['2020-04','2020-05','2020-06','2020-07','2020-08','2020-09'],
                        selected:{
                            '2020-05':false,
                            '2020-06':false,
                            '2020-07':false,
                            '2020-08':false,
                            '2020-09':false
                        }
                    },
                    // visualMap: {
                    //     top: 'middle',
                    //     right: 10,
                    //     // color: ['blue','green', 'yellow','red'],
                    //     calculable: true
                    // },
                    radar: {
                        indicator: [
                            { text: '债券', max: 1200},
                            { text: '基金', max: 1200},
                            { text: '股票', max: 1200},
                            { text: '货币市场', max: 1200},
                            { text: '非标', max: 1200}
                        ]
                    },
                    series:[
                        {
                            name: '浏览器（数据纯属虚构）',
                            type: 'radar',
                            symbol: 'none',
                            lineStyle: {
                                width: 3,
                            },
                            emphasis: {
                                areaStyle: {
                                    color: '#ff5cec'
                                }
                            },
                            data: [{
                                value: [1101.8,244.85,122.42,489.69,489.69],
                                name: "2020-04"
                               },]
                        },
                        {
                            name: '浏览器（数据纯属虚构）',
                            type: 'radar',
                            symbol: 'none',
                            lineStyle: {
                                width: 3
                            },
                            emphasis: {
                                areaStyle: {
                                    color: 'rgba(0,250,0,0.3)'
                                }
                            },
                            data: [{
                                value: [1087.0 ,326.11,190.23,543.51,570.69],
                                name: "2020-05"
                            },]
                        },
                        {
                            name: '浏览器（数据纯属虚构）',
                            type: 'radar',
                            symbol: 'none',
                            lineStyle: {
                                width: 3
                            },
                            emphasis: {
                                areaStyle: {
                                    color: 'rgba(0,250,0,0.3)'
                                }
                            },
                            data: [{
                                value: [1080.44 ,289.87,184.46,474.34,606.1],
                                name: "2020-06"
                            },]
                        },
                        {
                            name: '浏览器（数据纯属虚构）',
                            type: 'radar',
                            symbol: 'none',
                            lineStyle: {
                                width: 3
                            },
                            emphasis: {
                                areaStyle: {
                                    color: 'rgba(0,250,0,0.3)'
                                }
                            },
                            data: [{
                                value: [1051.82 ,404.55,269.7,323.64,647.28],
                                name: "2020-07"
                            },]
                        },
                        {
                            name: '浏览器（数据纯属虚构）',
                            type: 'radar',
                            symbol: 'none',
                            lineStyle: {
                                width: 3
                            },
                            emphasis: {
                                areaStyle: {
                                    color: 'rgba(0,250,0,0.3)'
                                }
                            },
                            data: [{
                                value: [1144.96 ,433.23,340.4,371.34,804.57],
                                name: "2020-08"
                            },]
                        },
                        {
                            name: '浏览器（数据纯属虚构）',
                            type: 'radar',
                            symbol: 'none',
                            lineStyle: {
                                width: 3
                            },
                            emphasis: {
                                areaStyle: {
                                    color: 'rgba(0,250,0,0.3)'
                                }
                            },
                            data: [{
                                value: [1197.25 ,600.13,294.56,303.56,599],
                                name: "2020-09"
                            },]
                        }
                    ]
                },
            }
        },
        mounted() {
            this.getEchart()
        },
        methods:{
            getEchart() {
                let myChart = echarts.init(document.getElementById('bigClassConfigurationTrend'));
                myChart.setOption(this.option, true);
                window.addEventListener('resize', () => {
                    myChart.resize();
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
    .sn-container {
        left: 50px;
        top: 2030px;
        width: 870px;
        height: 400px;
        .chartsdom {
            width: 100%;
            height: 100%;
        }
    }
</style>